<template>
    <!-- 商品信息 -->
    <div class="container">
        <div class="body_box">
            <div class="img_box">
                <img :src="goodsDetail.pic_url" :alt="goodsDetail.pic_url" />
            </div>
            <p class="price">￥{{ (goodsDetail.price / 100).toFixed(2) }}</p>
            <div class="goods_name">{{ goodsDetail.name }}</div>
            <p class="brands">品牌商：{{ goodsDetail.brand }}</p>
            <div class="express_prompt">
                <span>
                    库存：<span>{{ goodsDetail.stock }}</span>
                </span>
                <span>免邮费 顺丰快递</span>
            </div>
            <div class="detail">
                <p class="title">商品详情</p>
                <!-- v-html  解析我们的html代码 -->
                <p class="content" v-html="goodsDetail.detail_info">
                </p>
            </div>
        </div>
    </div>
    <!-- 底部 -->

    <!-- 底部 动作栏 -->
    <van-action-bar>
        <van-action-bar-icon :badge="store.count" @click="router.push('/cart')" icon="cart-o" text="购物车" />
        <van-action-bar-icon @click="collect" :icon="goodsDetail.collect > 0 ? 'star' : 'star-o'"
            :text="goodsDetail.collect > 0 ? '已收藏' : '未收藏'" color="#ff5000" />
        <van-action-bar-button @click="addCart" type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" @click="router.push(`/address-list?goodsId=${route.params.id}`)"
            text="立即购买" />
    </van-action-bar>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getGoodsDetail } from '@/api/goods'
import { collecdAdd, collecdDelete } from '@/api/collect'
import { cartAdd, cartEdit } from '@/api/cart'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant';
import useCartInfo from '@/stores/useCartInfo'


// 获取router实例
let route = useRoute()
let router = useRouter()
let store = useCartInfo()

console.log(route.params.id);

let goodsDetail = ref({})

// 挂载完成 自动调接口 获取商品详情
onMounted(async () => {
    goodsDetail.value = (await getGoodsDetail({ id: route.params.id })).data
})

let collect = async () => {
    if (goodsDetail.value.collect > 0) {
        // 已经收藏  执行取消收藏逻辑
        await collecdDelete({ type: "1", object_id: route.params.id })
        showSuccessToast("取消收藏成功");
        goodsDetail.value.collect = 0;
    } else {
        // 未收藏  执行 收藏逻辑
        await collecdAdd({ type: "1", object_id: route.params.id });
        showSuccessToast("收藏成功");
        goodsDetail.value.collect = 1;
    }
};

let addCart = async () => {
    // 判断当前商品是否在购物车内存在
    // find方法 在购物车列表内 查询 是否有当前商品  有则返回对应数据  无则返回undfind
    let data = store.list.find((item) => item.goods_id == route.params.id);
    if (data) {
        // 购物车内存在当前商品  需要调用编辑接口 给当前商品数量加1
        //id 该商品在购物车内的编号   goods_id 商品编号   count 当前商品在购物车内的数量
        await cartEdit({ id: data.id, goods_id: route.params.id, count: data.count + 1 })
        showSuccessToast("添加至购物车成功");
        store.getCartInfo()
    } else {
        // 如果不存在直接调用添加接口 将当前商品添加至购物车
        await cartAdd({ goods_id: route.params.id, count: 1 })
        showSuccessToast("添加至购物车成功");
        // 触发 购物车仓库action  重新获取最新的购物车数据
        store.getCartInfo()
    }
};

</script>

<style lang="scss" scoped>
// 内边距离
$pad: 8px;

.body_box {
    background-color: white;
    margin: 0 10px;

    .img_box {
        width: 100%;
        text-align: center;

        img {
            width: 100%;
        }
    }

    .goods_name {
        padding: 0 $pad;
        background-color: white;
        font-size: 18px;
    }

    .brands,
    .express_prompt {
        padding: 0 $pad;
        display: flex;
        justify-content: space-between;
        color: #999999;
        font-size: 14px;
        margin: 6px 0;
    }

    .price {
        padding: 0 $pad;
        color: #f63515;
        font-size: 22px;
        margin: 6px 0;
    }

    .detail {
        .title {
            margin: 10px 0;
            font-weight: bold;
            font-size: 14px;
            color: black;
            text-align: center;
        }

        .content {
            padding: 0 12px;
            font-size: 16px;
            color: rgb(84, 84, 84);
            text-indent: 2em;
        }
    }
}
</style>
